<template>
  <div id="login">

    <form class="login-form" action="">
      <h1 v-if='current_router == "/register"'>注册</h1>
      <h1 v-else>登录</h1>
      <el-input class="input" placeholder="Please Input" :prefix-icon="User" v-model="userName"
        @blur='valiteUsername()' />
      <el-input class="input" placeholder="Please Input" :prefix-icon="Lock" v-model='passWord'
        @blur='valitePassword()' />
      <el-button type="primary" @click='submit()'>Submit</el-button>
    </form>
  </div>
</template>

<script setup>
import { Search, User, Lock } from '@element-plus/icons-vue';
import { ref } from 'vue';

import router from '../router';
import { useRouter } from 'vue-router';
import axios from 'axios';

const routers = useRouter();
console.log(routers.options.routes)
console.log(location.pathname)
const current_router = location.pathname;

const userName = ref('')
const passWord = ref('')
const valiteUsername = () => {
  let reg = /^(\d{10}\@qq\.com)$|[\d]{11}$/
  if (reg.test(userName.value)) {
    console.log(' success')
    return true
  } else {
    console.error('验证不通过，请重新输入')
    userName.value = ''
  }
}
const valitePassword = () => {
  let reg = /\S{6,12}/
  if (reg.test(passWord.value)) {
    return true
  } else {
    console.error('验证不通过，请重新输入')
    passWord.value = ''
  }
}
const submit = () => {
  if (valiteUsername() && valitePassword()) {
    console.log('验证通过')
    router.push('/')
    
    axios.post('http://localhost:3000/login', {
      username: userName.value,
      usePassword: passWord.value
      
    })
      .then(function (response) {
        console.log(response);
       
      })
      .catch(function (error) {
        console.log(error);
       
      });

  } else {
    userName.value = ''
    passWord.value = ''
    alert('输入有误，请重新输入')
  }
}
</script>

<style lang="scss">
#app {
  background: #2d3a4b;
}

.el-input__wrapper {
  background: transparent;
  padding: 10px;
}

#login {
  background: #2d3a4b;
  height: 100vh;
  text-align: center;
  color: #fff;

  .el-input {
    &:nth-child(2) {
      margin: 30px 0;
    }
  }

  .el-button {
    background: #1890ff;
    padding: 20px;
  }

  .login-form {
    width: 30%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    justify-content: center;

    .input {
      display: flex;


    }

    .el-input:nth-child(3) {
      margin: 30px 0;
    }


    input {
      width: 100%;
      border-radius: 10px;
      outline: none;
      border: none;

      &::-webkit-input-placeholder {
        font-size: 12px;
      }
    }


    input[type="submit"] {
      background: #1890ff;
    }

    svg {
      width: 20px;
      color: #889aa4;
    }
  }

}
</style>